<!-- 登录页 -->
<template>
  <div class="login-container columnCC">
    <el-form ref="formRef" class="login-form" :model="loginForm" :rules="loginRules">
      <div class="title-container">
        <h3 class="title text-center">用户登录</h3>
      </div>
      <el-form-item prop="username">
        <div class="rowSC">
          <el-input v-model="loginForm.username" placeholder="用户名(admin)" />
          <!--占位-->
          <div class="show-pwd" />
        </div>
      </el-form-item>
      <el-form-item prop="password">
        <div class="rowSC flex-1">
          <el-input
            :key="passwordType"
            ref="refPassword"
            v-model="loginForm.password"
            :type="passwordType"
            name="password"
            placeholder="密码(123456)"
            @keyup.enter="handleLogin"
          />
          <span class="show-pwd" @click="showPwd">
            <el-icon v-if="passwordType === 'password'"><View /></el-icon>
            <el-icon v-else><Hide /></el-icon>
          </span>
        </div>
      </el-form-item>
      <el-button :loading="loading" type="primary" class="login-btn" size="default" @click.prevent="handleLogin">
        登录
      </el-button>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { ElForm, ElInput, ElMessage } from 'element-plus';
import { useUserStore } from '@/store/user.js';
import { useRoute, useRouter } from 'vue-router';
import { View, Hide } from '@element-plus/icons-vue';
const route = useRoute()
const router = useRouter()

const passwordType = ref<string>('password')
const loading = ref<boolean>(false)
let redirect: any = undefined
let otherQuery: KeyValue = {}

// 解析route参数
const getOtherQuery = (query: KeyValue) => {
  return Object.keys(query).reduce((acc, cur) => {
    if (cur !== 'redirect') {
      acc[cur] = query[cur]
    }
    return acc
  }, {})
}
watch(route, () => {
  const query = route.query
  if (query) {
    redirect = query.redirect
    otherQuery = getOtherQuery(query)
  }
}, {
  immediate: true
})

const loginForm = reactive({
  username: '', password: ''
})

const loginRules = {
  username: [{ required: true, trigger: 'blur', message: '请输入账号' }],
  password: [{ required: true, trigger: 'blur', message: '请输入密码' }]
}

// 显示密码
const passwordRef = ref<null | InstanceType<typeof ElInput>>(null)
const showPwd = () => {
  if (passwordType.value === 'password') {
    passwordType.value = ''
  } else {
    passwordType.value = 'password'
  }
  nextTick(() => {
    passwordRef.value?.focus()
  })
}

// 登录
const formRef = ref<null | InstanceType<typeof ElForm>>(null)
const handleLogin = () => {
  formRef.value?.validate(valid => {
    if (valid) {
      loading.value = true
      useUserStore().login(loginForm)
        .then(() => {
          ElMessage({ type: 'success', message: '登录成功！' })
          router.push({ path: redirect || '/', query: otherQuery })
          loading.value = false
        })
        .catch(() => {
          loading.value = false
        })
    } else {
      console.log('error submit!!')
      return false
    }
  })
}

</script>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.login-container {
  height: 100vh;
  width: 100%;
  background-color: #2d3a4b;
  display: flex;
  align-items: center;
  justify-content: center;
  .login-form {
    margin-bottom: 20vh;
    width: 360px;
  }
  .title-container {
    .title {
      font-size: 22px;
      color: #eee;
      margin: 0px auto 25px auto;
      text-align: center;
      font-weight: bold;
    }
  }
}

.svg-container {
  padding-left: 6px;
  color: $dark_gray;
  text-align: center;
  width: 30px;
}

//错误提示信息
.tip-message {
  color: #e4393c;
  height: 30px;
  margin-top: -12px;
  font-size: 12px;
}

//登录按钮
.login-btn {
  width: 100%;
  margin-bottom: 30px;
}
.show-pwd {
  font-size: 16px;
  color: $dark_gray;
  cursor: pointer;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

<style lang="scss">
//css 样式重置 增加个前缀避免全局污染
.login-container {
  .el-form-item__content, .rowSC {
    width: 100%;
  }
  .el-input__wrapper {
    background-color: transparent;
    box-shadow: none;
    width: 100%;
  }
  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
    width: 100%;
  }
  .el-input input {
    background: transparent;
    border: 0px;
    -webkit-appearance: none;
    border-radius: 0px;
    padding: 10px 5px 10px 15px;
    color: #fff;
    height: 42px; //此处调整item的高度
    caret-color: #fff;
    width: 100%;
  }
  //hiden the input border
  .el-input__inner {
    box-shadow: none !important;
    width: 100%;
  }
}
</style>